<template>
  <div ref="limitupTimes" class="limitup-times"></div>
</template>

<script>
import drawLimitupTimes from '@/draw/limitupTimes.js';
export default {
  props: {
    limitUpTimesByMonth: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    limitUpTimesByMonth(nval) {
      const months = Object.keys(nval);
      const sealTimesArr = [];
      const touchTimesArr = [];
      months.forEach(key => {
        const { sealTimes, touchTimes } = nval[key];
        sealTimesArr.push(sealTimes);
        touchTimesArr.push(touchTimes);
      });
      drawLimitupTimes && drawLimitupTimes(this.$refs.limitupTimes, { months, sealTimesArr, touchTimesArr });
    },
  },
};
</script>
<style lang="less" scoped>
.limitup-times {
  width: 100%;
  height: 400px;
}
</style>
